*{
    padding:0;
    margin:0;
}
.container{
    width:700px;
    height:400px;
    overflow: hidden;
    position:relative;
    margin:0 auto;
}
.list{
    width:3500px;
    height:400px;
    position:absolute;

}
.list>img{
    float:left;
    width:700px;
    height:400px;
}
.pointer{
    position:absolute;
    width:100px;
    bottom:20px;
    left:250px;
}
.pointer>span{
    cursor:pointer;
    display:inline-block;
    width:10px;
    height:10px;
    background: #7b7d80;
    border-radius:50%;
    border:1px solid #fff;
}
.pointer .on{
    background: #28a4c9;
}
.arrow{
    position:absolute;
    text-decoration:none;
    width:40px;
    height:40px;
    background: #727d8f;
    color:#fff;
    font-weight: bold;
    line-height:40px;
    text-align:center;
    top:180px;
    display:none;
}
.arrow:hover{
    background: #0f0f0f;
}
.left{
    left:0;
}
.right{
    right:0;
}
.container:hover .arrow{
    display:block;
}